<template>
	<view class="page">
		<view class="header">
			<image @click="back" src="/static/image/login/left.png" mode=""></image>
			<text>创建行程</text>
		</view>
		<view style="height: 176rpx;">
			
		</view>
		<!-- <scroll-view scroll-y > -->
			<view class="cont">
				<!-- <cover-view style="width: 80vw; height: 388rpx;background-color:#fff;"></cover-view> -->
				
				<!-- <web-view class="webviewaaa" :fullscreen="false" 
				 style="width: 100vw;height: calc(100vh - 366rpx);position: static;"
				 :webview-styles="webConfig"
				 src="/static/searchmap.html"></web-view> -->
				 
				 <map
				   id="test_map2"
				   style="width: 100vw; height: calc(100vh - 366rpx)"
				   :show-location="true"
				   show-compass="true"
				   show-location="true"
				 >
					 <cover-view class="searchbox">
					  <cover-view style="width: 40rpx;"></cover-view>
					  <cover-view class="searchbtn">
						  <cover-view class="left">
							  <cover-image style="width: 100%;height: 100%;"  src="/static/image/publish/search.png" mode=""></cover-image>
						  </cover-view>
						<input type="text" @confirm="handleConfirm" @input="handleInput" placeholder="查找地点" />
						<cover-view class="right">
							<cover-image src="/static/image/publish/scan.png" mode=""></cover-image>
							<cover-image src="/static/image/publish/voice.png" mode=""></cover-image>
						</cover-view>
					  </cover-view>
					  <cover-view style="width: 40rpx;"></cover-view>
					 </cover-view>
					 <cover-view class="tooltip">
						  <cover-view class="box" style="border-bottom: 2rpx solid #E5E5E5;">
							  <cover-image src="/static/image/publish/message.png" mode=""></cover-image>
							  <cover-view>消息</cover-view>
						  </cover-view>
						  <cover-view class="box">
							 
							  <cover-image src="/static/image/publish/stack.png" mode=""></cover-image>
							<cover-view>图层</cover-view>
						  </cover-view>
					 </cover-view>
					 <cover-view v-if="flag == 2" >
						 <cover-image  class="positiona" src="/static/image/publish/thisposition.png" mode=""></cover-image>
					 </cover-view>
					 <cover-view v-if="flag == 2" >
						 <cover-image  class="nava" src="/static/image/publish/nav.png" mode=""></cover-image>
					 </cover-view>
					 
					 
					 <cover-view class="result" v-if="flag == 1">
					 	<cover-view class="top">
					 						<cover-view>在 深圳市 找到结果，是否切换城市：</cover-view><cover-view class="target">广州市</cover-view>
					 					</cover-view>
					 					<cover-view class="item" v-for="(item, index) in result" :key="index">
					 						<cover-image class="left" :src="item.src" mode=""></cover-image>
					 						<cover-view class="right">
					 							<cover-view class="title">{{item.title}}</cover-view>
					 							<cover-view class="dis">{{item.dis}}</cover-view>
					 							<cover-view class="tips">
					 								<cover-view v-if="item.score" class="score">
					 									<cover-view class="a">{{item.score}}</cover-view>
					 									<cover-view class="b">分</cover-view>
					 								</div>
					 								<cover-view class="noraml">{{item.tips}}</cover-view>
					 							</cover-view>
					 							<cover-view class="tagbox" v-if="item.tags && item.tags.length">
					 								<cover-view v-for="it in item.tags" class="tag">{{it}}</cover-view>
					 							</cover-view>
					 						</cover-view>
					 						<cover-image class="route" src="/static/image/publish/route.png" mode=""></cover-image>
					 					</cover-view>
					</cover-view>
					 </cover-view>
					 
					 <cover-view>
						 <!-- <cover-view style="width: 100rpx: 100rpx;"></cover-view> -->
						 <tabbar selected="2"></tabbar>
					 </cover-view>
					 
					 
				 </map>
				 
				 <!-- <div class="map" style="width: 100vw; height: calc(100vh - 366rpx);background-color: #eee;"></div> -->

				 
		<!-- 		 <iframe src="/static/searchmap.html" style="height: calc(100vh - 366rpx);width: 100vw;" >
				 </iframe> -->


<!-- 				  <div class="searchbox">
					  <div style="width: 40rpx;"></div>
					  <view class="searchbtn">
						  <div class="left">
							  <image style="width: 100%;height: 100%;"  src="/static/image/publish/search.png" mode=""></image>
						  </div>
					  	
						<input type="text" @confirm="handleConfirm" @input="handleInput" placeholder="查找地点" />
						<view class="right">
							<image src="/static/image/publish/scan.png" mode=""></image>
							<image src="/static/image/publish/voice.png" mode=""></image>
						</view>
					  </view>
					  <div style="width: 40rpx;"></div>
				  </div> -->
				  
	<!-- 			  <div class="tooltip">
					  <div class="box" style="border-bottom: 2rpx solid #E5E5E5;">
						  <image src="/static/image/publish/message.png" mode=""></image>
					      <text>消息</text>
					  </div>
					  <div class="box">
						 
						  <image src="/static/image/publish/stack.png" mode=""></image>
						<text>图层</text>
					  </div>
				  </div> -->
				  
				  
				  
				
			</view>
	
<!-- 		<view class="" style="height: 190rpx;">
		</view> -->
		
	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbarcover.vue";
	import people from '../../static/image/travel/people.png'
	import listItem from '../../static/image/travel/list-item.png'
	import mapresult from '../../static/image/publish/mapresult.png'
	export default {
		components: {
			tabbar: tabbar,
		},
		data() {
			return {
				webConfig: {
					height: 'calc(100vh - 366rpx)',
					width: '100vw',
					// position: "static"
				 },
				flag: 2, // 1 结果 2定位
				result: [
					{
						src: mapresult,
						title: '泰然立诚',
						dis: '直线距离5.3km',
						tips: '[房产] 16分钟前有人去过',
						tags: ['方便停车']
					},
					{
						src: mapresult,
						title: '泰然科技园A座',
						dis: '直线距离5.2km',
						tips: '[工业园区] 5000+人去过',
						tags: []
					},
					{
						src: mapresult,
						title: '湾区时尚(泰然立诚店)',
						dis: '直线距离5.2km',
						tips: '[工业园区] 5000+人去过',
						tags: [],
						score: '3.9'
					},
				],
				suggest: '',
				concat: '',
				txt: '',
				showImg: [people],
				step: 2, // 1列表 2添加
				locationData: {
					title: '冰心故居',
					desc: '福建省福州市鼓楼区杨桥东路17号',
					count: 2334,
					
				},
				list: [
				{
					name: '岩瑶妹',
					src: people,
					desc: '在项目伊始时做一个用户研究的作用好过于在项目落地后再对50个用户进行测试',
					poster: [
						listItem, listItem,listItem
					]
				},
				{
					name: 'Chad Ortiz',
					src: people,
					desc: '有功无过是短暂的，无功有过是行不通的，有功有过是最好的',
					poster: [
						listItem, listItem,listItem, listItem, listItem,
					]
				},
				{
					name: 'Margaret Owen',
					src: people,
					desc: '不要在你家里放一件你不知其用，或你认为不美的东西',
					poster: [
						listItem, listItem,listItem, listItem
					]
				},
				{
					name: 'Ruby Pena',
					src: people,
					desc: '不要在你家里放一件你不知其用，或你认为不美的东西',
					poster: [
						listItem,
					]
				}
				]
			}
		},
		methods: {
			handleConfirm() {
				this.flag = 1
			},
			handleInput(e) {
				this.ipt = e.target.value
				if(!e.target.value) {
					this.flag = 2
				}
			},
			handleConcat(event) {
				this.suggest = event.target.detail
			},
			back() {
				uni.navigateBack()
			},
			daka() {
				this.step = 2
			},
			add() {
				uni.chooseImage({
				        count: 5, // 默认9, 设置图片的最大选择数，设置为1表示只选择一张图片
				        sourceType: ['camera'], // 可选前置或后置，默认['album', 'camera']
				        success: (res) => {
				          this.showImg = res.tempFilePaths || []; // 获取选中的文件列表，取第一张图片的路径
				        },
				        fail: (err) => {
				          console.error('调用图片失败',err);
				        }
				      });
			},
		}
	}
</script>

<style lang="less" scoped>
.page {
	background: #EEF0F4;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	.header {
		height: 176rpx;
		background-color: #fff;
		// padding-top: 108rpx;
		display: flex;
		justify-content: center;
		// align-items: center;
		position: fixed;
		width: 100%;
		z-index: 1;
		image {
			position: absolute;
			left: 32rpx;
			bottom: 24rpx;
			width: 34rpx;
			height: 34rpx;
		}
		text {
			position: absolute;
			bottom: 16rpx;
			font-weight: 600;
			font-size: 34rpx;
			color: #221715;
			line-height: 51rpx;
		}
	}
	// .content {
	// 	flex: 1;
	// 	margin: 20rpx;
	// 	// padding-top: 176rpx;
	// 	background-color: #FFF;
		
	// 	border-top-left-radius: 16rpx;
	// 	border-top-right-radius: 16rpx;
	// 	.content-top {
	// 		padding: 30rpx 30rpx 30rpx 30rpx;
	// 		border-bottom: 2rpx solid #F3F5F7;
	// 		.content-top-one {
	// 			display: flex;
	// 			align-items: center;
	// 			height: 48rpx;
	// 			image {
	// 				width: 46rpx;
	// 				height: 40rpx;
	// 				margin-left: 6rpx;
	// 				margin-bottom: 20rpx;
	// 			}
	// 			text {
	// 				font-weight: 500;
	// 				font-size: 34rpx;
	// 				color: #221715;
	// 				line-height: 48rpx;
	// 				margin-left: 16rpx;
	// 			}
	// 		}
	// 		.content-top-two {
	// 			font-weight: 400;
	// 			font-size: 28rpx;
	// 			color: #777777;
	// 			line-height: 40rpx;
				
	// 		}
	// 	}
	// 	.content-comment {
	// 		padding: 36rpx 30rpx;
	// 		.comment-clock {
	// 			display: flex;
	// 			justify-content: space-between;
	// 			align-items: center;
	// 			margin-bottom: 30rpx;
	// 			.comment-clock-left {
	// 				font-weight: bold;
	// 				font-size: 30rpx;
	// 				color: #1A1A1A;
	// 				line-height: 42rpx;
	// 			}
	// 			.comment-clock-right {
	// 				width: 144rpx;
	// 				height: 56rpx;
	// 				background: linear-gradient( 270deg, #0187F5 0%, #2DCCC2 100%);
	// 				border-radius: 28rpx;
	// 				display: flex;
	// 				justify-content: center;
	// 				align-items: center;
	// 				image {
	// 					width: 32rpx;
	// 					height: 32rpx;
	// 				}
	// 				text {
	// 					margin-left: 14rpx;
	// 					font-weight: 400;
	// 					font-size: 28rpx;
	// 					color: #FFFFFF;
	// 					line-height: 40rpx;
	// 				}
	// 			}
	// 		}
	// 		.commentbox {
	// 			.commentboxitem {
	// 				margin-bottom: 20rpx;
	// 				border-bottom: 2rpx solid #F3F5F7;;
	// 				.top {
	// 					margin-bottom: 20rpx;
	// 					display: flex;
	// 					align-items: center;
	// 					image {
	// 						width: 48rpx;
	// 						height: 48rpx;
	// 						border-radius: 16rpx;
	// 						margin-right: 16rpx;
	// 					}
	// 					text {
	// 						font-weight: 400;
	// 						font-size: 28rpx;
	// 						color: #1A1A1A;
	// 						line-height: 40rpx;
	// 					}
	// 				}
	// 				.middle {
	// 					margin-bottom: 20rpx;
	// 					text {
	// 						font-weight: 400;
	// 						font-size: 28rpx;
	// 						color: #595959;
	// 						line-height: 40rpx;
	// 					}
	// 				}
	// 				.end {
	// 					margin-bottom: 20rpx;
	// 					image {
	// 						width: 100rpx;
	// 						height: 100rpx;
	// 						border-radius: 8rpx;
	// 						margin-right: 16rpx;
	// 					}
	// 				}
	// 			}
	// 		}
	// 	}
	// 	.daka {
	// 		padding: 36rpx 30rpx;
	// 		.dakatitle {
	// 			font-weight: 500;
	// 			font-size: 30rpx;
	// 			color: #1A1A1A;
	// 			line-height: 42rpx;
	// 			margin-bottom: 20rpx;
	// 		}
	// 		.textarea11 {
	// 			// width: 80%;
	// 			margin-bottom: 20rpx;
	// 			border-radius: 16rpx;
	// 			// width: 400rpx;
	// 			// height: 200rpx;
	// 			background: #F5F7F9;
				
	// 			// padding: 20rpx;\
	// 			textarea {
	// 				padding: 20rpx;
	// 				font-size: 28rpx;
	// 				line-height: 40rpx;
	// 			}
	// 		}
	// 		.textareaplaceholder {
	// 			font-size: 28rpx;
	// 			color: #999999;
	// 			line-height: 40rpx;
	// 			// padding: 20rpx;
	// 		}
	// 		.imgoperate {
	// 			display: flex;
	// 			margin-bottom: 80rpx;
	// 			.img {
	// 				width: 140rpx;
	// 				height: 140rpx;
	// 				margin-right: 24rpx;
	// 				image {
	// 					width: 140rpx;
	// 					height: 140rpx;
	// 				}
	// 			}
	// 			.add {
	// 				width: 140rpx;
	// 				height: 140rpx;
	// 			}
	// 		}
	// 		.btn {
	// 			margin-top: 80rpx;
	// 			margin: 0 20rpx;
	// 			height: 88rpx;
	// 			background: #006FF6;
	// 			border-radius: 44rpx;
	// 		}
	// 	}
	// }
}

// .cont {
// 	// width: 710rpx;
// 	margin: 20rpx;
// 	// height: 682rpx;
// 	background: #FFFFFF;
// 	border-radius: 16rpx;
// 	padding: 30rpx;
// 	.firsttitle {
		
// 		margin-bottom: 20rpx;
// 		.aaa {
// 			font-weight: bold;
// 			font-size: 30rpx;
// 			color: #E80000;
// 			line-height: 42rpx;
// 			padding-right: 10rpx;
// 			padding-top: 10rpx;
// 		}
// 		.bbb{
// 			font-weight: bold;
// 			color: #1A1A1A;
// 			font-size: 30rpx;
// 			line-height: 42rpx;
// 		}
// 	}
// 	.textarea1 {
// 		// width: 650rpx;
// 		height: 200rpx;
// 		background: #F5F7F9;
// 		border-radius: 16rpx;
// 		margin-bottom: 30rpx;
		
// 		// padding: 20rpx;\
// 		textarea {
// 			padding: 20rpx;
// 			font-size: 28rpx;
// 			line-height: 40rpx;
// 		}
// 	}
// 	.subtitle {
// 		margin-bottom: 20rpx;
// 		font-weight: bold;
// 		font-size: 30rpx;
// 		color: #1A1A1A;
// 		line-height: 42rpx;
// 	}
// 	.textarea2 {
// 		margin-bottom: 80rpx;
// 		// width: 650rpx;
// 		height: 100rpx;
// 		background: #F5F7F9;
// 		border-radius: 16rpx;
// 		input {
// 			padding: 20rpx;
// 			font-size: 28rpx;
// 			line-height: 40rpx;
// 		}
// 	}
// 	// button {
// 	// 	// width: 650rpx;
// 	// 	height: 88rpx;
// 	// 	background: #006FF6;
// 	// 	border-radius: 44rpx;
		
// 	// 	font-weight: bold;
// 	// 	font-size: 30rpx;
// 	// 	color: #FFFFFF;
// 	// 	line-height: 42rpx;
// 	// 	display: flex;
// 	// 	justify-content: center;
// 	// 	align-items: center;
// 	// }
	
	
// 	.item {
// 		padding: 30rpx 0;
// 		display: flex;
// 		align-items: center;
// 		justify-content: space-between;
// 		border-bottom: 2rpx solid #F3F5F7;
// 		.left {
// 			font-size: 28rpx;
// 			color: #1A1A1A;
// 			line-height: 40rpx;
// 			display: flex;
// 			align-items: center;
// 			image {
// 				width: 80rpx;
// 				height: 80rpx;
// 				border-radius: 50%;
// 				margin-right: 20rpx;
// 			}
// 			.name111 {
// 				font-weight: 400;
// 				font-size: 28rpx;
// 				color: #1A1A1A;
// 				line-height: 40rpx;
// 				margin-right: 20rpx;
// 			}
// 			.tag {
// 				width: 116rpx;
// 				height: 32rpx;
// 				border-radius: 4rpx;
// 				border: 1rpx solid #B0C3DD;
// 				font-weight: 400;
// 				font-size: 24rpx;
// 				color: #0F4999;
// 				line-height: 32rpx;
// 				display: flex;
// 				justify-content: center;
// 				align-items: center;
// 			}
// 		}
// 		.right {
// 			display: flex;
// 			align-items: center;
// 			text {
// 				font-weight: 400;
// 				font-size: 28rpx;
// 				color: #F82400;
// 				line-height: 40rpx;
// 			}
// 			// .avator {
// 			// 	width: 100rpx;
// 			// 	height: 100rpx;
// 			// 	border-radius: 50%;
// 			// }
// 			// .btn {
// 			// 	width: 40rpx;
// 			// 	height: 40rpx;
// 			// }

// 		}

// 	}
	
// 	button {
// 		height: 88rpx;
// 		background: #006FF6;
// 		border-radius: 44rpx;
		
// 		font-weight: bold;
// 		font-size: 30rpx;
// 		color: #FFFFFF;
// 		line-height: 42rpx;
// 		display: flex;
// 		justify-content: center;
// 		align-items: center;
// 		margin-top: 80rpx;
// 	}
// }

.cont {
	width: 100vw;
	position: relative;
	// background-color: red;
	// background: #FFFFFF;
	border-radius: 16rpx;
	flex: 1;
	
	.webviewaaa {
		height: calc(100vh - 366rpx);
		width: 100vw;
	}
	
	.searchbox {
		position: absolute;
		z-index: 2;
		left: 0;
		top: 20rpx;
		width: 100%;
		display: flex;
		// padding: 0 40rpx;
	}
	.searchbtn {
		flex: 1;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 44rpx;
		border: 1rpx solid #D9D9D9;
		.left {
			width: 48rpx;
			height: 48rpx;
			margin-right: 20rpx;
		}
		input {
			flex: 1;
		}
		.right {
			display: flex;
			align-items: center;
			flex-direction: row;
			cover-image {
				width: 48rpx;
				height: 48rpx;
				margin-left: 20rpx;
			}
		}
	}
}

.tooltip {
	width: 72rpx;
	height: 232rpx;
	// padding: 0 20rpx;
	// box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 8rpx;
	position: absolute;
	z-index: 2;
	top: 30%;
	right: 20rpx;
	// flex-direction: column;
	.box {
		height: 50%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		cover-view {
			font-weight: 400;
			font-size: 20rpx;
			color: #000000;
			line-height: 28rpx;
		}
		cover-image {
			width: 36rpx;
			height: 36rpx;
			margin-bottom: 6rpx;
		}
	}
}
.positiona {
	width: 72rpx;
	height: 72rpx;
	position: absolute;
	bottom: 178rpx;
	right: 20rpx;
	z-index: 2;
}
.nava {
	width: 72rpx;
	height: 72rpx;
	position: absolute;
	bottom: 76rpx;
	right: 20rpx;
	z-index: 2;
}

.result {
	position: absolute;
	bottom: 26rpx;
	width: 100vw;
	z-index: 1;
	// bottom: 0;
	// width: 750rpx;
	max-height: 580rpx;
	padding: 30rpx;
	box-sizing: border-box;
	overflow-y: auto;
	background: #FFFFFF;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	.top {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		cover-view{
			font-weight: 400;
			font-size: 28rpx;
			color: #595959;
			line-height: 40rpx;
		}
		.target {
			color: #376DF1;
		}
	}
	.item {
		height: 206rpx;
		border-bottom: 2rpx solid #F3F5F7;
		display: flex;
		margin-bottom: 20rpx;
		position: relative;
		
		.left {
			width: 200rpx;
			height: 160rpx;
			border-radius: 16rpx;
			border: 2rpx solid #F5F7F9;
			margin-right: 20rpx;
		}
		.right {
			display: flex;
			flex-direction: column;
			.title {
				font-weight: bold;
				font-size: 30rpx;
				color: #1A1A1A;
				line-height: 42rpx;
				margin-bottom: 10rpx;
			}
			.dis {
				font-weight: 400;
				font-size: 24rpx;
				color: #777777;
				line-height: 34rpx;
				margin-bottom: 10rpx;
			}
			.tips {
				display: flex;
				// justify-content: center;
				align-items: center;
				margin-bottom: 10rpx;
				.score {
					width: 76rpx;
					height: 32rpx;
					background: #DAEBF6;
					border-radius: 4rpx;
					display: flex;
					margin-right: 18rpx;
					.a {
						font-size: 28rpx;
						color: white;
						width: 44rpx;
						height: 32rpx;
						background: linear-gradient( 270deg, #0187F5 0%, #2DCCC2 100%);
						border-radius: 4rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.b {
						flex: 1;
						font-size: 24rpx;
						color: #0288F5;
						line-height: 32rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
				.noraml {
					font-weight: 400;
					font-size: 24rpx;
					color: #1A1A1A;
					line-height: 34rpx;
				}
			}
			.tagbox {
				display: flex;
				flex-wrap: wrap;
				.tag {
					// width: 116rpx;
					padding: 6rpx 10rpx;
					max-height: 44rpx;
					background: #FFF2E4;
					border-radius: 8rpx;
					margin-right: 10rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #EA7B03;
					line-height: 32rpx;
				}
			}
		}
		.route {
			width: 48rpx;
			height: 48rpx;
			background: #ECEDEE;
			border-radius: 8rpx;
			position: absolute;
			right: 0;
			top: 0;
		}
	}
}
</style>
